<template>
<!-- 电商数据分析 5 31 -->
  <div
    id="Ecommerce"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <div v-if="vipRootObj[5][31].owner">
      <!-- 商品种类 -->
      <radioGroupWithNum
        :radio_values="proKindList"
        v-model="proKind"
        title="商品类目"
        class="mt_30"
      />
      <!-- 合作品牌 -->
      <!-- <radioGroupWithNum
      :radio_values="brandList"
      v-model="brand"
      title="合作品牌"
      class="mt_10"
    /> -->
      <!-- 合作小店 -->
      <radioGroupWithNum
        :radio_values="shopList"
        v-model="shop"
        title="合作小店"
        class="mt_10"
      />
      <!-- 时间 -->
      <section class="mt_10">
        <!-- 时间 -->
        <!-- <radio_group01
          :radio_values="['昨天', '近7天', '近30天']"
          v-model="dateRange"
          class="timeOptions"
        /> -->
        <!-- 搜索 -->
        <section class="search01">
          <div class="searchBox">
            <el-input
              v-model="keyword"
              placeholder="请输入商品关键词搜索"
              @keyup.enter.native="toSearch"
            ></el-input>
            <div class="imgBox" @click="toSearch">
              <img src="@/assets/wang/talentCompare/search.png" />
            </div>
          </div>
        </section>
      </section>
      <table class="table">
        <thead>
          <tr>
            <th>商品</th>
            <th>达人关联视频数</th>
            <th>达人关联视频点赞</th>
            <th>全网销量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in dataList" :key="'a' + index">
            <td>
              <div class="goodsBox">
                <img :src="item.pro_logo" class="leftImg" />
                <div class="rightBox">
                  <div>
                    <!-- 来源 -->
                    <div style="margin-right: 5px">
                      <SourceIcon
                        :sourceid="item.profrom"
                        @click="toGoodsDetails(item.pro_id, '0')"
                      />
                    </div>
                    <span class="overflowTextWl">{{ item.pro_title }}</span>
                  </div>
                  <div>
                    <p>
                      券后价<span>￥{{ item.pro_price }}</span>
                    </p>
                  </div>
                </div>
              </div>
            </td>
            <td>{{ format_num(item.video_count) }}</td>
            <td>{{ format_num(item.favorite_count) }}</td>
            <td>{{ format_num(item.volume) }}</td>
            <td>
              <div class="optionBox">
                <el-tooltip
                  class="item"
                  effect="light"
                  content="商品详情"
                  placement="top"
                  popper-class="mytooltip"
                  :hide-after="2000"
                >
                  <img
                    src="@/assets/wang/video/goods.png"
                    @click="toGoodsDetails(item.pro_id, '0')"
                  />
                </el-tooltip>
                <!-- <el-tooltip
                class="item"
                effect="light"
                content="关联视频详情"
                placement="top"
                popper-class="mytooltip"
                :hide-after="2000"
              >
                <img
                  src="@/assets/wang/goods/3.png"
                  alt=""
                  @click="seeDetais(item.aweme_id, '0')"
                />
              </el-tooltip> -->
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div
        v-loading="loading"
        v-if="!(dataList.length < (page - 1) * 20)"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
      <p
        class="nothing"
        v-show="dataList.length != 0 && dataList.length < (page - 1) * 20"
      >
        我是有底线的～
      </p>
      <div class="empty" v-show="!loading && dataList.length == 0">
         <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
      </div>
      <pop
        v-if="dialog"
        v-model="dialog"
        :id="video_id"
        :index="active_name01"
      />
    </div>
    <!-- 优化后的示例图 -->
    <div v-else class="notVipBoxNewWl">
      <img :src="$global.staticUrl + 'image/egImg/Ecommerce.jpg'" class="egBgImg" />
      <el-dialog
        :visible="true"
        :modal-append-to-body="false"
        :lock-scroll="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :show-close="false"
        custom-class="detailsDialog"
      >
        <div class="dialogEg">
          <payVip routerName="Ecommerce" :lowestVipNum="vipRootObj[5][31].ownerMinLevel" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import radioGroupWithNum from "@/component/radioGroupWithNum.vue";
import pop from "@/pages/meng/video/pop";
import SourceIcon from "@/component/SourceIcon.vue";

export default {
  name: "Ecommerce",
  components: { radioGroupWithNum, pop, SourceIcon },
  data() {
    return {
      dateRange: "昨天",
      proKindList: [],
      proKind: "全部",
      shopList: [],
      shop: "全部",
      keyword: "",
      dialog: false,
      video_id: "",
      active_name01: 1,
      // 取消之前未响应的请求
      cancel01: null,
      cancel02: null,
      page: 1,
      busy: false,
      loading: true,
      dataList: [],
      vipRootObj: this.$store.state.userRoot,  //会员权限对象
    };
  },
  computed: {
    changeData() {
      const { proKind, shop, dateRange } = this;
      return {
        proKind,
        shop,
        dateRange,
      };
    },
  },
  watch: {
    changeData() {
      this.dataList = [];
      this.page = 1;
      this.getKind();
    },
    // 搜索
    keyword: function (newVal, oldVal) {
      if (newVal == "") {
        this.dataList = [];
        this.page = 1;
        this.getKind();
      }
    },
  },
  created() {
    if (this.vipRootObj[5][31].owner) {
      this.getKind();
    }
  },
  mounted() {},

  methods: {
    toSearch() {
      this.dataList = [];
      this.page = 1;
      this.getKind();
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`,
      });
      window.open(router.href, "_blank");
    },
    // 视频详情
    seeDetais(id, index) {
      this.dialog = true;
      this.active_name01 = index;
      this.video_id = id;
    },
    // 分类
    getKind() {
      let that = this;
      that.loading = true;
      let time = "1d";
      if (that.dateRange == "昨天") {
        time = "1d";
      } else if (that.dateRange == "近7天") {
        time = "7d";
      } else if (that.dateRange == "近30天") {
        time = "30d";
      }
      that.$axios
        .get(
          "/api/live/GetAuthorProAnalysisCategory",
          {
            params: {
              authorid: that.$route.params.id,
              // day: time,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.proKindList = res.data.data.category.map((iterator) => {
              return {
                name: iterator.name,
                value: iterator.value,
                num: iterator.count,
                t: iterator.t,
              };
            });
            that.shopList = res.data.data.shop.map((iterator) => {
              return {
                name: iterator.name,
                value: iterator.value,
                num: iterator.count,
                t: iterator.t,
              };
            });
            that.getList();
          } else {
            that.loading = false;
            that.busy = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 列表
    getList() {
      let that = this;
      that.loading = true;
      let time = "1d";
      if (that.dateRange == "昨天") {
        time = "1d";
      } else if (that.dateRange == "近7天") {
        time = "7d";
      } else if (that.dateRange == "近30天") {
        time = "30d";
      }
      // 商品类目
      let proCateId = 0;
      that.proKindList.map((item, index) => {
        if (item.name == this.proKind) {
          proCateId = item.value;
        }
      });

      // 小店分类
      let shopId = 0;
      that.shopList.map((item, index) => {
        if (item.name == this.shop) {
          shopId = item.value;
        }
      });
      that.$axios
        .get(
          "/api/live/GetAuthorProAnalysis",
          {
            params: {
              authorid: that.$route.params.id,
              keyword: this.trimStr(that.keyword),
              day: time,
              shopid: shopId,
              categoryid: proCateId,
              page: that.page,
              size: 20,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.page += 1;
            that.dataList = that.dataList.concat(res.data.data);
            res.data.data.length < 20
              ? (that.busy = true)
              : (that.busy = false);
          } else {
            that.busy = true;
          }
          that.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //   加载更多
    loadMore() {
      if (this.loading == false) {
        this.getList();
      }
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>
<style lang='less' scoped>
#Ecommerce {
  .search01 {
    display: inline-block;
    // margin-left: 28px;
    margin-bottom: 19px;
    .searchBox {
      margin-top: 0 !important;
    }
  }
  .timeOptions {
    display: inline-block;
    margin-right: 28px;
    margin-bottom: 19px;
  }
  table {
    thead {
      tr {
        th:nth-of-type(1) {
          text-align: left;
          width: 35%;
          padding-left: 2%;
        }
        th:nth-of-type(2),
        th:nth-of-type(3) {
          width: 18%;
        }
        th:nth-of-type(4) {
          width: 15%;
        }
      }
    }
    tbody {
      tr {
        height: 140px;
        td {
          text-align: center;
        }
        td:nth-of-type(2),
        td:nth-of-type(3),
        td:nth-of-type(4) {
          font-family: DINAlternate-Bold;
          font-size: 16px;
          color: #222222;
        }
        td:nth-of-type(4) {
          color: #1779ff !important;
        }
      }
    }
    // 商品
    .goodsBox {
      padding-left: 5%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .leftImg {
        width: 80px;
        height: 80px;
        border-radius: 20px;
        border: 1px solid #e5e5e5;
      }
      .rightBox {
        flex: 1;
        margin-left: 20px;
        text-align: left;
        div:nth-of-type(1) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          text-align: left;
          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
          span {
            text-align: left;
            font-weight: 600;
            // padding-left: 5px;
          }
        }
        div:nth-of-type(2) {
          text-align: left;
          margin-top: 11px;
          p {
            display: inline-block;
          }
          p:nth-of-type(1) {
            font-size: 14px;
            color: #555555;
            padding-right: 24px;
            span {
              font-family: DINAlternate-Bold;
              font-size: 16px;
              color: #ea1b0b;
              padding-left: 3px;
            }
          }
          p:nth-of-type(2) {
            font-size: 14px;
            color: #555555;
            // padding-left: 24px;
            span {
              font-family: DINAlternate-Bold;
              font-size: 16px;
              color: #222222;
              padding-left: 8px;
            }
          }
        }
      }
    }
    // 操作
    .optionBox {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 32px;
        height: 32px;
        // margin-right: 16px;
        cursor: pointer;
      }
      img:nth-child(4) {
        margin-right: 0;
      }
    }
  }
}
</style>